<template>
  <div style="margin-top:20px">
    <el-table border ref="multipleTable" height="520" :data="rule_map" size='mini'>
      <template slot="empty">
        <el-empty :description="$t('暂无数据')"></el-empty>
      </template>
      <el-table-column prop="rule_id" align='center' :label="$t('规则ID')" width="80" />
      <el-table-column prop="proto" align='center' :formatter="protoValue" width="120" :label="$t('协议名称')">
        <template slot-scope="scope">
          {{ rule[scope.row.proto] }}
        </template>
      </el-table-column>
      <el-table-column prop="action" align='center' :formatter="matchOptionFormatter" width="80" :label="$t('动作')" />
      <el-table-column prop="tag_type" align='center' :formatter="tagTypeFormatter" width="140" :label="$t('点类型')" />
      <el-table-column prop="commond_describe_type_name" align='center' :label="$t('其他配置')">
        <template slot-scope="scope">
          <tooltip :html="rowsTooltip(scope.row, true)" :content="rowsTooltip(scope.row, false)" class="wid190" :refName="scope.row.proto"></tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('操作')" width="160" fixed='right'>
        <template slot-scope="scope">
          <el-button type="success" plain @click="editRule(scope.row)" size='mini' :class="'edit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
          <el-button type="danger" plain @click="deleteRule(scope.row)" size='mini' :class="'del' +(scope.$index+1)">{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import ruleArray from '../../ruleArray'
export default {
  name: 'CipTable',
  props: {
    ruleMap: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    ruleMap: {
      handler (newValue, oldValue) {
        this.rule_map = []
        newValue.forEach(val => {
          if (val.proto === 'cip') {
            this.rule_map.push(val)
          }
        })
      },
      deep: true // 深度监听
    }
  },
  data () {
    return {
      rule: ruleArray.ruleShow,
      rule_map: [],
      tagTypeList: ruleArray.tagTypeCipList,
      actionList: { 'accept': '允许', 'alert': '告警' }
    }
  },
  mounted () {
    this.rule_map = []
    this.rule_map_connect = []
    this.ruleMap.forEach(val => {
      if (val.proto === 'cip') {
        this.rule_map.push(val)
      }
    })
  },
  methods: {
    // 删除规则
    deleteRule (row) {
      this.$emit('delRuleMap', row)
    },
    // 编辑规则
    editRule (row) {
      this.$emit('largeConfig', row)
    },
    // 协议名称显示
    protoValue (data) {
      return this.rule[data.proto]
    },
    // 动作格式化
    matchOptionFormatter (data) {
      return this.$t(this.actionList[data.action])
    },
    // cip功能码格式化
    tagTypeFormatter (data) {
      return this.$t(this.tagTypeList[data.tag_type])
    },
    rowsTooltip (data, html) { // 寄存器区间:DB区,地址范围:1.3~2.4,DB 值:54,值类型:NULL,值范围78~87;
      var str = ''
      data.commond_describe_type_name.forEach(val => {
        str += this.$t('功能码') + val.commond
        str += val.describe === 'null' ? '' : (this.$t(',描述') + val.describe)
        str += this.$t(',类型') + val.type
        str += val.name === 'any' ? '' : (this.$t(',点名') + val.name)
        str += ';'
        if (html) {
          str += '<br/>'
        }
      })
      return str
    }
  }
}
</script>
